<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1.html</title>
  <style>
    button {
      display: block;
    }
  </style>
</head>

<body>
  <h1 id="h1">我是1.html网页</h1>
  <p class="content"></p>
  <iframe src="2.html" height="300" width="500" id='demo' name="demo"></iframe>
  <!-- <button id="changeTitle">修改iframe标题内容</button>
  <button id="childMethod">childMethod</button>
  <button id="childObj">childObj</button> -->
</body>

</html>

<script>
  // iframe分为同域和不同域.
  // 这里是同域的例子.
  // 这里的同域比较严格,协议+域名+端口号都必须相同才行.
  // 1.html 内部嵌套了 2.html 它们在同一个网站,利用同一个living.所以它们两满足同域要求.

  // 既然1.html包含了2.html.它们也是同域.
  // 1.html就可以向操作自己子dom节点一样操作这个iframe

  const sameOrginIframe = document.getElementById('demo') // 拿到iframe
  // 由于 iframe 是异步加载的,必须等到它加载完毕,才能拿到真实的dom结构.
  // sameOrginIframe.addEventListener('load', function () {
  //   console.log('iframe已经加载完毕')
  //   const iWindow = sameOrginIframe.contentWindow; // 由于iframe本质上也是一个完整的HTML.所以它也有window
  //   const iDocument = sameOrginIframe.contentDocument; // 同理 document
  //   // console.log(iWindow)
  //   // console.log(iDocument)
  //   // 父元素修改子元素的内容.
  //   document.getElementById('changeTitle').addEventListener('click', function () {
  //     iDocument.getElementById('h1').innerHTML = '我的内容被1.html改了'
  //   }, false)

  //   document.getElementById('childMethod').addEventListener('click', function () {
  //     iWindow.childMethod()
  //   },false)

  //   document.getElementById('childObj').addEventListener('click', function () {
  //     console.log('aaaa')
  //     console.log(iWindow)
  //     console.log(iWindow.childObj)
  //     for(var prop in iWindow.childObj) {
  //       console.log(`${prop} : ${iWindow.childObj[prop]}`)
  //     }
  //   }, false)
  // }, false)
  // sameOrginIframe = window.frames['demo'] // 也可以使用name属性获取

  // 是不是1.html 加载完毕了,内部的iframe就一定加载完毕?
  // window.addEventListener('load', function () {
  //   console.log('window.onload')
  // }, false)

  // sameOrginIframe.addEventListener('load', function () {
  //   console.log('iframe onload') // 测试结果,满足想法.
  // }, false)

  // window.onload = function () {
  //   const iframe2 = window.frames['demo'] // 拿到直接子iframe..
  //   // const iframe3 = window.frames['demo2'] // 只能拿子级,子子级无法获取.
  //   const iframe2Window = iframe2.contentWindow // 拿到iframe2的window
  //   console.log('iframe2Window',iframe2.contentWindow)
  //   const iframe2Document = iframe2.contentDocument // 拿到iframe2的document

  //   // 拿到 iframe2 的 window 之后,就可以获取一些全局的属性和方法了.
  //   console.log(iframe2Window.childObj.name , iframe2Window.childObj.age,iframe2Window.childObj.gender) 
  // }

  // 必须监听 iframe 的 onload 事件执行时机,才能获取到正确的数据,包括 window 和 document
  sameOrginIframe.addEventListener('load', function () {
    const iframe2Window = sameOrginIframe.contentWindow
    const iframe2Document = sameOrginIframe.contentDocument
    // top 获取 iframe 的数据
    console.log(iframe2Window.childObj.name,iframe2Window.childObj.age,iframe2Window.childObj.gender)
    // top 获取 iframe 的方法
    const method = iframe2Window.childMethod
    // 修改2.html元素
    iframe2Document.body.style.backgroundColor = 'red'
    method()
  }, false)

  window.addEventListener('message', function (e) {
    console.log(e.origin) // 数据从那个页面传递过来的.
    console.log(e.data)
  },false)

</script>